﻿@{
    Layout = "~/Areas/User/Views/Shared/_Layout.cshtml";
}
@section Title{首页-美妆商城}
@section Logo{
   <ul class="shopping_grid">
    <a href="#"><li><span class="m_1">购&nbsp;物&nbsp;车</span>&nbsp;&nbsp;(0) &nbsp;<img src="~/Content/User/images/bag.png" alt="" /></li></a>
    <a href="/User/Home/login"><li>登&nbsp;录</li></a>
    <a href="/User/Home/Register"><li>注&nbsp;册</li></a>
    <div class="clearfix"> </div>
</ul>
}


    <script src="~/Content/User/js/responsiveslides.min.js"></script>
    <script>
        $(function () {
            $("#slider").responsiveSlides({
                auto: true,
                nav: true,
                speed: 500,
                namespace: "callbacks",
                pager: true,
            });
        });
    </script>
    <script type="text/javascript" src="~/Content/User/js/hover_pack.js"></script>


   
    <div class="slider">
        <div class="callbacks_container">
            <ul class="rslides" id="slider">
                <li>
                    <img src="~/Content/User/images/banner1.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>We Provide Worlds top fashion for less fashionpress.</h1>
                        <h2>FashionPress the name of the of hi class fashion Web FreePsd.</h2>
                    </div>
                </li>
                <li>
                    <img src="~/Content/User/images/banner2.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>Duis autem vel eum iriure dolor in hendrerit.</h1>
                        <h2>Claritas est etiam processus dynamicus, qui sequitur .</h2>
                    </div>
                </li>
                <li>
                    <img src="~/Content/User/images/banner3.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>Ut wisi enim ad minim veniam, quis nostrud.</h1>
                        <h2>Mirum est notare quam littera gothica, quam nunc putamus.</h2>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="column_center">
        <div class="container">
            <div class="search">
                <div class="stay">Search Product</div>
                <div class="stay_right">
                    <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
                    <input type="submit" value="">
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="main">
        <div class="content_top">
            <div class="container">
                <div class="col-md-3 sidebar_box">
                    <div class="sidebar">
                        <div class="menu_box">
                            <h3 class="menu_head">Products Menu</h3>
                            <ul class="menu">
                                <li class="item1">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" /> Man</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item2">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Women</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item3">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Fashion 2015</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails</a></li>
                                    </ul>
                                </li>
                                <li class="item4">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Kids</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item5">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Jeans</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item6">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Tshirt</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item7">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Top Fashion</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item8">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Summer Collection</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                                <li class="item9">
                                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />Special Offer</a>
                                    <ul class="cute">
                                        <li class="subitem1"><a href="#">Cute Kittens </a></li>
                                        <li class="subitem2"><a href="#">Strange Stuff </a></li>
                                        <li class="subitem3"><a href="#">Automatic Fails </a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!--initiate accordion-->
                        <script type="text/javascript">
                            $(function () {
                                var menu_ul = $('.menu > li > ul'),
                                       menu_a = $('.menu > li > a');
                                menu_ul.hide();
                                menu_a.click(function (e) {
                                    e.preventDefault();
                                    if (!$(this).hasClass('active')) {
                                        menu_a.removeClass('active');
                                        menu_ul.filter(':visible').slideUp('normal');
                                        $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                    } else {
                                        $(this).removeClass('active');
                                        $(this).next().stop(true, true).slideUp('normal');
                                    }
                                });

                            });
                        </script>
                    </div>
                </div>
                <div class="col-md-9 content_right">
                    <div class="top_grid1">
                        <div class="col-md-4 box_2">
                            <div class="grid_1">
                                <a href="single.html">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p1.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-md-8 box_1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p2.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="top_grid2">
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p3.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p4.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p5.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="top_grid2">
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p6.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p7.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p8.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <h4 class="head"><span class="m_2">Popular</span> Products Now</h4>
                    <div class="top_grid2">
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p9.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p10.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p11.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="top_grid2">
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p12.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p13.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 top_grid1-box1">
                            <a href="single.html">
                                <div class="grid_1">
                                    <div class="b-link-stroke b-animate-go  thickbox">
                                        <img src="~/Content/User/images/p14.jpg" class="img-responsive" alt="" />
                                    </div>
                                    <div class="grid_2">
                                        <p>There are many variations of passages</p>
                                        <ul class="grid_2-bottom">
                                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                                            <div class="clearfix"> </div>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    